import React, { Component } from 'react';
import { Toast, WingBlank } from "antd-mobile"
import { httpUtil } from "dcloud-utils";
import { httpUrl } from "dcloud-core";
import styles from '../main/user/index.less';

class Page extends Component {
    constructor(props) {
        super(props);
        document.title = '历史预约记录';
        this.state = {
            search: true,
            msg: '暂无历史预约记录',
            data:
                [
                    //     {
                    //     "appointmentNo": "",
                    //     "appointmentNoNumber": 5,
                    //     "date": "",
                    //     "identityNo": "",
                    //     "isFailed": 0,
                    //     "mobilePhone": "",
                    //     "name": "",
                    //     "selfSubmitAddress": "",
                    //     "selfSubmitId": "",
                    //     "selfSubmitPoint": "",
                    //     "tenantId": "",
                    //     "userId": ""
                    // }
                ]
        }
    }

    componentDidMount() {
        httpUtil.get(httpUrl.detailList, {
            tenantId: localStorage.getItem('tenantId'),
            pageNo: 1,
            pageSize: 100
        }).then((res) => {
            if (res.code == 200) {
                this.setState({
                    data: res.data.records
                })
            }else{
                this.setState({
                    msg: res.msg
                });
            }
        }).catch(error => {
            Toast.fail(res.msg, 2);
        })
    }

    render() {
        if (this.state.data) {
            if (this.state.data.length > 0) {
                return <div className={styles.user}>
                    <div style={{ height: '100%' }}>
                        <WingBlank>
                            {
                                this.state.data.map((item) => {
                                    return <div className={styles.box}>
                                        <p className={styles.list}>
                                            <span className={styles.title}>预约状态：</span>
                                            <span className={styles.text}>{item.isFailed === 0 ? '预约成功' : '预约失败'}</span>
                                        </p>
                                        <p className={styles.list}>
                                            <span className={styles.title}>预约号：</span>
                                            <span className={styles.text}>{item.appointmentCode}</span>
                                        </p>
                                        <p className={styles.list}>
                                            <span className={styles.title}>预约口罩数量：</span>
                                            <span className={styles.text}>{item.maskAmount}</span>
                                        </p>
                                        <p className={styles.list}>
                                            <span className={styles.title}>姓名：</span>
                                            <span className={styles.text}>{item.userName}</span>
                                        </p>
                                        <p className={styles.list}>
                                            <span className={styles.title}>手机号：</span>
                                            <span className={styles.text}>{item.mobile}</span>
                                        </p>
                                        <p className={styles.list}>
                                            <span className={styles.title}>身份证号：</span>
                                            <span className={styles.text}>{item.idCardNum}</span>
                                        </p>
                                        <p className={styles.list}>
                                            <span className={styles.title}>地址：</span>
                                            <span className={styles.text}>{item.userAddress ? item.userAddress : '-'}</span>
                                        </p>
                                        <p className={styles.list}>
                                            <span className={styles.title}>自提点：</span>
                                            <span className={styles.text}>{item.distributionSiteName}</span>
                                        </p>
                                        <p className={styles.list}>
                                            <span className={styles.title}>自提点地址：</span>
                                            <span className={styles.text}>{item.distributionSiteAddress}</span>
                                        </p>
                                        <p className={styles.list}>
                                            <span className={styles.title}>预约时间：</span>
                                            <span className={styles.text}>{item.appointmentTime}</span>
                                        </p>
                                    </div>
                                })
                            }
                        </WingBlank>
                    </div></div>
            } else {
                return <div className={styles.user}><div className={styles.img}>
                    <img src={require('../../assets/images/noData.png')}></img>
                    <p className={styles.p}>{this.state.msg}</p>
                </div></div>
            }
        }
        return null
    }
}

export default Page;